<template>
  <div class="SystemPermissionAdd addButton">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/system/permission/list' }">权限列表</el-breadcrumb-item>
      <el-breadcrumb-item>权限添加</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form size="small" label-width="150px" style="margin-top: 30px;" :model="options" :rules="rules" ref="form">
      <el-form-item label="权限关键字:" prop="permission">
        <el-input v-model="options.permission" placeholder="权限关键字" size="small"></el-input>
      </el-form-item>
      <el-form-item label="菜单名称:" prop="menuName">
        <el-input v-model="options.menuName" placeholder="菜单名称" size="small" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="序号:" prop="serialNumber">
        <el-input v-model="options.serialNumber" placeholder="请填写菜单序号" size="small" type="number"></el-input>
      </el-form-item>
      <el-form-item label="一级菜单:" prop="parent">
        <el-select v-model="options.parent" clearable filterable size="small" placeholder="选择一级菜单,新增则不选" @change="menu">
          <el-option v-for="item in parent_menu" :key="item.id" :label="item.menuName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级菜单:" v-if="sonMenu" prop="subParent">
        <el-select v-model="options.subParent" clearable filterable size="small" placeholder="选择一级菜单,新增则不选">
          <el-option v-for="item in childMenu" :key="item.id" :label="item.menuName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="路由地址:" v-if="menus" prop="route">
        <el-input v-model="options.route" placeholder="路由名称" size="small"></el-input>
      </el-form-item>
      <el-form-item label="启用菜单" prop="menuOpend">
        <el-switch
          v-model="options.menuOpend"
          :active-value="1"
          :inactive-value="0"
          active-color="#ffb87e"
          inactive-color="#e1e1e1"
        ></el-switch>
      </el-form-item>
      <el-form-item label="图标:" prop="icon">
        <el-input v-model="options.icon" placeholder="图标名称" size="small" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" style="background:#fb9654;color:#fff" @click="add">立即提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  mounted() {
    this.getMenu();
  },
  data() {
    const empty = (rule, value, callback) => {
      if (value.replace(/(^\s+)|(\s+$)/g, "") !== "") {
        callback();
      } else {
        callback(new Error("输入内容不得为空"));
      }
    };
    const serialNumber = (rule, value, callback) => {
      if (value !== "") {
        if (value > 20) {
          callback(new Error("数字不得大于20"));
        } else {
          callback();
        }
      } else {
        callback(new Error("序号不得为空"));
      }
    };
    return {
      parent_menu: [],    //一级菜单内容
      childMenu: [],      //
      options: {
        permission: "", //权限关键字
        menuName: "", //菜单名称
        route: "", //路由地址
        icon: "", //图标地址
        parent: "", //父级id  1级菜单父级为0
        subParent: "", // 二级菜单id
        serialNumber: 0, //序号
        grade: 1, //权限等级 1/2/3 一级/二级/三级
        menuOpend: 1 //是否开启菜单 1/0 开启/关闭
      },
      rules: {
        menuName: [
          { required: true, validator: empty }
        ],
        serialNumber: [
          { required: true, validator: serialNumber }
        ]
      }
    };
  },
  computed: {
    // 选中一级二级菜单后,才填路由
    menus() {
      return this.options.parent && this.options.subParent;
    },
    // 存在一级菜单,则显示二级菜单列表
    sonMenu() {
      return this.options.parent;
    }
  },
  methods: {
    getMenu() {
      this.$api.system.getParentList({})
        .then((res) => {
          console.log(res.data);
          this.parent_menu = res.data;
          this.childMenu = this.parent_menu[0];
          this.options.parent = "";
        });
    },
    menu(id) {
      for (let item of this.parent_menu) {
        if (item.id === id) {
          this.childMenu = item.childrenPermission;
          console.log(item);
          break;
        }
      }
    },
    add() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let option = {
            permission: this.options.permission, //权限关键字
            menuName: this.options.menuName, //菜单名称
            route: this.options.route, //路由地址
            icon: this.options.icon, //图标地址
            parent: "", //父级id  1级菜单父级为0
            serialNumber: this.options.serialNumber, //序号
            grade: "", //权限等级 1/2/3 一级/二级/三级
            menuOpend: this.options.menuOpend //是否开启菜单 1/0 开启/关闭
          };
          // 如果存在二级菜单 则父id为二级菜单 否则为一级菜单
          if (this.options.subParent) {
            option.parent = this.options.subParent;
            option.grade = 3;
            // 存在一级菜单 添加二级菜单
          } else if (this.options.parent) {
            option.parent = this.options.parent;
            option.grade = 2;
          } else {
            // 一二级菜单都不存在，添加1级菜单
            option.parent = 0;
            option.grade = 1;
          }
          console.log(option);
          this.$api.system.menuAdd(option)
            .then((res) => {
              if (res.code === 200) {
                console.log(res);
                this.$message.success("添加成功");
                this.Continue();
              }
            });
        } else {
          return false;
        }
      });
    },
    Continue() {
      // this.options = {
      //   permission: "", //权限关键字
      //   menuName: "", //菜单名称
      //   route: "", //路由地址
      //   icon: "", //图标地址
      //   parent: "", //父级id  1级菜单父级为0
      //   subParent: "", // 二级菜单id
      //   serialNumber: 0, //序号
      //   grade: 1, //权限等级 1/2/3 一级/二级/三级
      //   menuOpend: 1 //是否开启菜单 1/0 开启/关闭
      // };
      this.getMenu();
    }
  }
};
</script>
<style scoped>
@import url(./add.css);
</style>
